<template>
  <div class="sub_ana_container">
      <i class="el-icon-close" @click="closeFlowTool"></i >
      <label>最大高度:</label>
      <input type="number" @input="maxChange" v-model="height_max">
      <label>最小高度:</label>
      <input type="number" @input="minChange" v-model="height_min">
      <label>淹没速度:</label>
      <input type="number" v-model="speed" @input="speedChange">
      <button class="btn" @click="startFlowing()">开始</button>
      <button class="btn" @click="clearFlowing()">清除</button>
      <button class="btn" @click="draw_ymfw()">绘制淹没范围</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      height_max:1000,
      height_min:10,
      speed:2,
    }
  },
  methods: {
    closeFlowTool(){
      this.$emit('hideFlood')
    },
    startFlowing(){
      this.$emit('startFlowing')
    },
    maxChange(){
      this.$emit('maxChange',this.height_max)
    },
    minChange(){
      this.$emit('minChange',this.height_min)
    },
    speedChange(){
      this.$emit('floodSpeed',this.speed)
    },
    startFlowing(){
      this.$emit('startFlowing')
    },
    clearFlowing(){
      this.$emit('clearFlowing')
    },
    draw_ymfw(){
      this.$emit('draw_ymfw')
    }
  },
}
</script>

<style scoped>
.sub_ana_container {
  position: absolute;
  right: 20%;
  top: 1%;
  width: auto;
  height: auto;
  border: solid 1px;
  padding: 12px;
  color: rgb(221, 218, 218);
  background-color: rgba(6, 89, 161, 0.8);
}
.el-icon-close{
  position: absolute;
  right: 5px;
  top: 3px;
  cursor: pointer !important;
  z-index: 100;
}
.btn {
  color: white;
  background-color: #555758;
  border: #555758;
  margin: 6px;
  cursor: pointer !important;
}
input {
  width: 100px;
}
label {
  margin: 8px;
  color: rgb(221, 218, 218);
}
input[type="radio"] {
  width: 30px;
}
</style>